<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="description" content="bootstrap admin template">
  <meta name="author" content="">
  <script type="text/javascript" src="../_resource/js/header.js"></script>
  <script>
    var RUN_FUNCS = [];
	var SITE_URL  = "http://admin.html.me";
	var CURR_CONTROLLER  = "Faq";
	var CURR_ACTION  = "add";
    Breakpoints();
  </script>
  <style type="text/css">
    .list-table table td, .list-table table th{background:#fff; text-align:center;}
    .__access{display: none;}
  </style>
  </head>
<body class="dashboard">
  <!--[if lt IE 8]>
  <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation" id="navbardefaultmodel">
       <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('head_html')"></script>
  </nav>
  <div class="site-menubar">
    <div class="site-menubar-body" id="site-menubar-body">
         <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('nav_html')"></script>
    </div>
  </div>

  <!-- Page -->
  <div class="page">
    <div class="page-content container-fluid">
          
    <div class="panel form-box " 
 style="" 
 >
<div class="panel-body">
    <form class="validate-form ajax-form" id="bossjobForm" enctype="application/x-www-form-urlencoded" target="_self" autocomplete="off">
        <div id="title-form-item"  class="form-group " style="" >
            <label for="title" class="control-label ">Title<span class="required">*</span>:</label>
            <div>
                <input type="text" name="title" id="faq-title" class="form-control " style="" placeholder="FAQ Title..."  value="" />
                <input type="text" name="id" id="faq-id" class="form-control " style="display: none;"  value="" />
            </div>
        </div>

        <div id="content-form-item"  class="form-group " style="" >
            <label for="content" class="control-label ">Content<span class="required">*</span>:</label>
            <div>
                <textarea id="summernote" data-plugin="summernote" name="content" placeholder="FAQ Content..."></textarea>
            </div>
        </div>

        <div id="category_id-form-item"  class="form-group " style="" >
            <label for="category_id" class="control-label ">Category:</label>
            <div>
                <select class="form-control form-control-sm" name="category_id" id="category_id">
                    <option value="0">Loading FAQ Category Data...</option>
                </select>
            </div>
        </div>

        <div id="status-form-item"  class="form-group " style="" >
            <label for="status" class="control-label ">Status:</label>
            <div>
                <select class="form-control form-control-sm" name="status" id="status">
                    <option value="1" >Activate</option>
                    <option value="2" >Deactivate</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <button type="button" id="save-faq" class="btn btn-lg btn-success">Submit</button>
        </div>
        <input type="hidden" value="1" name="id" />
    </form>
<script type="text/javascript">
$(function(){
    var _get = Api.Params()['id'];
    Api.Get('getFaqCateList', {order_by:JSON.stringify({'category_status': 'asc', 'id' : 'desc'}), category_status:JSON.stringify([1])}, function(object, error){
        if(object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200){
            var selectHtml = '', selectNums = object['data']['data'].length;
            for(var i=0; i<selectNums; ++i){
                selectHtml = selectHtml + Api.render('<option value="{cateId}">{cateName}</option>', {
                    'cateId' : object['data']['data'][i]['id'], 
                    'cateName' : object['data']['data'][i]['category_name'],
                });
            }
            if(selectHtml){
                $('#category_id').html(selectHtml);
                Api.Get('getFaqDetail', Api.Params()['id'], function(object, error){
                            console.log(object);
                    if(object['message'] == 'OK' && object['status_code'] == 200){
                        if(object['data']){
                            var faq = object['data'][0];
                            $('#faq-id').val(faq['id']);
                            $('#category_id').val(faq['category_id']);
                            $('#faq-title').val(faq['title']);
                            $('#summernote').code(faq['content']);
                            $('#status option[value="'+faq['status']+'"]').attr('selected', 'selected');
                        }
                    }else{
                        $.showError('Something Error, Retry Please.', 300, function(obj){
                            window.location.href = '/FaqCategory/index.html';
                        });
                    }
                });
            }
        }else{
            $.showError('Something Error, Retry Please.', 300, function(){
                // window.location.reload();
            });
            return true;
        }
    });
            
    $('#save-faq').click(function(){
        var title = $('#faq-title').val();
        if(0 == title.length){
            $.showError('FAQ title can not be empty.', 300, null, 1000);
            return false;
        }
        var content = $('#summernote').code();
        if(0 == content.length){
            $.showError('FAQ content can not be empty.', 300, null, 1000);
            return false;
        }
        var categoryId = $('#category_id').val();
        var status = $('#status').val();
        var faqId = $('#faq-id').val();
        Api.Put('saveFaq', {title:title,content:content,category_id:categoryId,status:status,id:faqId}, function(object, error){
            if(object['message'] && object['status_code'] && object['message'] == 'OK' && object['status_code'] == 200){
                $.showSuccess('Save FAQ Successfully.', 300, function(){
                    window.location.href = '/Faq/index.html';
                });
            }else{
                $.showError('Something Error, Retry Please.', 300, function(){
                    // window.location.reload();
                });
            }
        });
        return false;
    });
});
</script>
</div>
</div>
    
    </div>
	
	<!-- Modal -->
	<div class="modal fade" id="confirmModal" aria-hidden="true" role="dialog" tabindex="-1">
	  <div class="modal-dialog modal-center">
		<div class="modal-content">
		  <div class="modal-header">
			<h4 class="modal-title"></h4>
		  </div>
		  <div class="modal-body">
			<p></p>
		  </div>
		  <div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
			<button type="button" class="btn btn-primary"></button>
		  </div>
		</div>
	  </div>
	</div>
	<div class="modal fade" id="alertModal" aria-hidden="true" role="dialog" tabindex="-1">
	  <div class="modal-dialog modal-center">
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">×</span>
            </button>
			<h4 class="modal-title"></h4>
		  </div>
		  <div class="modal-body">
			<p></p>
		  </div>
		</div>
	  </div>
	</div>
	<!-- End Modal -->
  </div>
  <!-- End Page -->

  <!-- Footer -->
  <script type="text/javascript" src="../_resource/js/footer.js"></script>

    <script>
    (function(document, window, $) {
      'use strict';

      var Site = window.Site;
      $(document).ready(function() {
        Site.run();
          $('textarea[maxlength]').maxlength({
              threshold: 1000,
              placement: 'bottom-left-inside'
          });

          $.components.register("datepicker",{mode:"default",defaults:{autoclose:!0}});

        if (RUN_FUNCS.length > 0) {
          for(var i = 0; i < RUN_FUNCS.length; i++) {
            RUN_FUNCS[i].call();
          }
        }
      });
    })(document, window, jQuery);


  </script>
</body>
</html>